<template>
    <div class="collect" :class="loadingPage && 'g-loadingPage'">
        <c-header title="我的收藏"></c-header>
        <section class="body">
            <TopPrompt :options="topPrompt"></TopPrompt>
            <p class="touchPrompt"><i style="color:#d20000" class="fa fa-exclamation-triangle" aria-hidden="true"> </i> 提示：左滑动可以取消收藏</p>
            <div class="list">
                <transition-group appear tag="div" name="test"
                        v-on:before-enter="beforeEnter"
                        v-on:enter="enter"
                        v-on:before-leave="beforeLeave">
                    <LateralSpreads 
                    :index="index"
                    :item="item"
                    :deleteFun="topic_collect"
                    type="left" 
                    bgText="取消收藏"
                    v-bind:data-index="index" 
                    :key="item.id" 
                    v-for="(item,index) in listData">
                        <div :key="item.id"  @click="toTopic(item.id)" slot="slotContent" class="listLi">
                            <div class="title">
                                <span v-text="formatTabBtn(item.top,item.good,item.tab,false)" :class="formatTabBtn(item.top,item.good,item.tab,true)"></span>
                                <h3>{{item.title}}</h3>
                            </div>
                            <!-- <div class="text" v-html="item.content"></div> -->
                            <div class="user">
                                <div @click.stop="toUserProfile(item.author.loginname)" class="avatar m-avatar">
                                    <img :src="item.author.avatar_url" alt="">
                                </div>
                                <div class="info">
                                    <div class="name">
                                        {{item.author.loginname}}
                                        <p class="num">
                                            <span class="g-color">{{item.reply_count}}</span>/{{item.visit_count}}
                                        </p>
                                    </div>
                                    <div class="time">
                                        <span>6月前</span>
                                        <span class="g-fr">3天前</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </LateralSpreads>
                </transition-group>
                <div v-if="loadingList" class="loader-inner ball-pulse">
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
        </section>
    </div>
</template>
<script>
import Share from './../share'
import * as API from '../api'
import cHeader from './Header'
import LateralSpreads from './LateralSpreads'
import TopPrompt from './TopPrompt'

let beforeTab='';
let isListAnimate = true;
export default {

    name: 'collect',

    mixins: [Share],

    components: {
        TopPrompt,
        cHeader,
        LateralSpreads,
    },

    data() {
        return {
            loadingList:false,
            loadingPage: false,
            listData: [],
            showTouchPrompt:false,
            ajaxData: {
                page: 1,
                limit: 20,
            },
            topPrompt:{
                display:false,
                type: 'error',
                text: '',
                timeout: 3000,
            }
        }
    },

    created() {
        var tthis = this;
    },

    activated() {
        var tthis = this,
            routerTab = this.$route.query.tab;
        this.listData = [];
        tthis.getCollect();
    },

    deactivated(){
        isListAnimate=false;
    },

    computed: {
        userInfo() {
            return this.$store.state.user.userInfo;
        },
        queryName() {
            console.log(this.userInfo)
            return this.$route.query.name || this.userInfo.loginname;
        },
        listAnimateName(){
            // anName= 'fadeInRightBig'
            return 'flipInX';
        }
    },

    methods: {

        showTopPrompt(obj){
            this.topPrompt.display = true;
            this.topPrompt.type = obj.type || this.topPrompt.type;
            this.topPrompt.text = obj.text;
        },

        topic_collect(item,index){
            var tthis = this,
                type = 'de_collect';

            if(!tthis.loadingPage){
                tthis.loadingPage = true;
                API.topic_collect({
                    type: type,
                    data:{
                        accesstoken: tthis.userInfo.token,
                        topic_id:item.id
                    },
                    success(response) {
                        if (response) {
                            tthis.listData.splice(index,1);
                            tthis.showTopPrompt({
                                type:'successful',
                                text: '取消收藏成功！',
                            })
                        }
                    },
                    complete() {
                        tthis.loadingPage = false;
                    }
                })
            }
        },

        beforeEnter(el){
            if(!isListAnimate){
                return;
            }
            el.style.visibility = 'hidden';
        },

        enter(el, done){
            if(!isListAnimate){
                return;
            }
            let tthis = this,
                index = el.dataset.index - (this.ajaxData.page - 2) * this.ajaxData.limit;
            setTimeout(function(){
                el.style.visibility = 'visible';
                var vClass= el.getAttribute('class');
                el.className = vClass + ' animated ' + tthis.listAnimateName;
                done();
            },index * 150);
        },

        beforeLeave(el){
            if(!isListAnimate){
                return;
            }
            el.style.visibility = 'hidden';
        },

        getCollect() {
            var tthis = this;
            if (!tthis.loadingList) {
                tthis.loadingList = true;
                API.collect({
                    data: {
                        // accesstoken: tthis.userInfo.token,
                        name:tthis.queryName
                    },
                    success(response) {
                        if (response) {
                            tthis.listData = tthis.listData.concat(response.data);
                            tthis.ajaxData.page++;
                        }
                    },
                    complete() {
                        tthis.loadingList = false;
                    }
                })
            }
        },
    },
}

</script>
<style lang="less" scoped>
.touchPrompt{
    width: 92%;
    margin: 10px 4%;
    padding: 4px 10px;
    background: #f3f3f3;
    color: #333;
    border-radius: 5px;
    .fa{
        margin-right: 4px;
    }
}
.listLi {
    padding: 10px;
    height: 102px;
    border-bottom: 1px solid #f5f5f5;
    animation-duration: .3s;
    overflow: hidden;
    transition: all .3s ease;
    &:last-child{
        // border-bottom: 0;
    }
    .title {
        span {
            float: left;
            color: #fff;
            font-size: 13.8px;
            padding: 1px 4px;
            margin-right: 10px;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
            border-bottom-left-radius: 2px;
            border-bottom-right-radius: 2px;
            display: inline-block;
        }
        h3 {
            color: #333;
            font-weight: 600;
            font-size: 16px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
    }
    .text{
        color: #999;
        overflow : hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }
    .user {
        padding-top: 6px;
        width: 100%;
        overflow: hidden;
        display: flex;
        .avatar {}
        .info {
            padding-top: 5px;
            padding-left: 10px;
            flex: 1;
            .num {
                float: right;
                font-size: 14px;
            }
            .time2 {
                float: right;
            }
        }
    }
}

</style>
